<!-- 子组件 -->
<!-- ref: https://blog.csdn.net/weixin_42171053/article/details/116302728 -->

<template>
	<view>
		<!-- {{dc.names}} -->
		<!-- <picker @change="handleChange" :value="index" :range="dc.names">
			--- {{dc.names[index] || dc.placeholder}} ---
		</picker> -->
	
		<!-- 选择框 -->
		<view class='picker_view'>
			<!-- 文本 -->
			<view class='picker_text'>
				<text>{{dc.text}}</text>
			</view>
			
			<!-- 普通选择器 -->
			<!-- <input maxlength="10" :placeholder="dc.placeholder" :disabled="dc.disabled" :value="dc.names[index] || dc.placeholder" /> -->
			<picker @change="handleChange" :value="index" :range="dc.names" class='picker'>
				<view class="picker_input">
					<input maxlength="10" :placeholder="dc.placeholder" :disabled="dc.disabled" :value="index == -1?'':dc.names[index]" />
				</view>
				<uni-icons class="picker_icons" type="arrowright" size="20"/>
			</picker>
		</view>
	</view>
	
</template>



<script>
export default {
	name: "myPicker",
	props: ['dc'],
	data() {
		return {
			index: -1
		};
	},
	watch:{
		// 解决异步加载带来的回显问题
		value(val){
			// var rrrrrrr = this.dc.names.findIndex(item => item == val);
			// console.log('----------------- r: ', rrrrrrr);
			this.index = this.options.findIndex(item => item == val);
		}
	},
	methods: {
		handleChange(e) {
			this.index = e.target.value;
			let currentValue = this.dc.names[this.index];
			this.$emit("retMsg", currentValue)
		},
	}
}
</script>


<style lang="scss" scoped>
	
	// 选择框
	.picker_view {
		width: 100%;
		display: flex;
		// margin: auto;
		border-top: 3upx solid #ccc;
		border-bottom: 3upx solid #ccc;
		padding: 20upx;
	}
	.picker_text {
		width: 35%;
	}
	// .picker_select {
	// 	width: 100%;
	// }
	.picker {
		width: 65%;
		float: right;
		display: flex;
	}
	.picker_input {
		// display: block;
		width: 80%;
		float: left;
		text-align: right;
	}
	.picker_icons {
		float: right;
		width: 20%;
		// margin-left: 10upx;
	}
	
	
	// <view>
	// 	<!-- 选择框 -->
	// 	<view class='picker_view'>
	// 		<!-- 文本 -->
	// 		<view class='picker_text'>
	// 			<text>{{text}}</text>
	// 		</view>
			
	// 		<!-- 普通选择器 -->
	// 		<picker @change="handleChange" :value="index" :range="options" class='picker'>
	// 			<view class="picker_input">
	// 				<input maxlength="10" :placeholder="placeholder" :disabled="disabled" :value="options[index] || placeholoder" />
	// 			</view>
	// 			<uni-icons class="picker_icons" type="arrowright" size="20"/>
	// 		</picker>
	// 	</view>
	// </view>
</style>
